<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户管理 - 个人中心</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .user-card {
            display: flex;
            align-items: center;
            background: #fff;
            border-radius: 14px;
            box-shadow: 0 2px 12px rgba(76,175,80,0.08);
            margin-bottom: 18px;
            padding: 20px 32px;
            transition: box-shadow 0.2s;
        }
        .user-card:hover {
            box-shadow: 0 6px 24px rgba(76,175,80,0.18);
        }
        .user-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 32px;
            border: 2px solid #4CAF50;
            background: #f3f3f3;
        }
        .user-info {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 18px 32px;
        }
        .user-info > div {
            min-width: 120px;
            font-size: 1.05em;
        }
        .user-actions button {
            margin-right: 10px;
        }
        .user-actions form {
            display: inline;
        }
        .badge-status {
            font-size: 1em;
            padding: 6px 14px;
        }
        .user-label {
            color: #888;
            font-size: 0.95em;
        }
    </style>
</head>
<body class="bg-light">
<div class="container my-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2 class="text-success">用户管理</h2>
        <button class="btn btn-success px-4 py-2" data-bs-toggle="modal" data-bs-target="#addUserModal">新增用户</button>
    </div>

    <!-- 用户列表 -->
    <div th:each="user : ${users}" class="user-card">
        <img th:src="${user.avatarUrl != null ? user.avatarUrl : 'https://cdn-icons-png.flaticon.com/512/149/149071.png'}" class="user-avatar" alt="头像">
        <div class="user-info">
            <div><span class="user-label">昵称</span><br><strong th:text="${user.displayName}">昵称</strong></div>
            <div><span class="user-label">账号</span><br><span th:text="${user.username}">账号</span></div>
            <div><span class="user-label">邮箱</span><br><span th:text="${user.email}">邮箱</span></div>
            <div><span class="user-label">角色</span><br><span th:text="${user.role}">角色</span></div>
            <div><span class="user-label">性别</span><br><span th:text="${user.gender}">性别</span></div>
            <div><span class="user-label">年龄</span><br><span th:text="${user.age}">年龄</span></div>
            <div><span class="user-label">身高(cm)</span><br><span th:text="${user.height}">身高</span></div>
            <div><span class="user-label">体重(kg)</span><br><span th:text="${user.weight}">体重</span></div>
            <div><span class="user-label">电话</span><br><span th:text="${user.phone}">电话</span></div>
            <div>
                <span th:if="${user.banned}" class="badge bg-danger badge-status">禁用</span>
                <span th:unless="${user.banned}" class="badge bg-success badge-status">正常</span>
            </div>
            <div><span class="user-label">注册时间</span><br><span th:text="${#dates.format(user.createdAt, 'yyyy-MM-dd HH:mm')}">注册时间</span></div>
            <div><span class="user-label">最近登录</span><br><span th:text="${user.lastLoginTime != null ? #dates.format(user.lastLoginTime, 'yyyy-MM-dd HH:mm') : '从未登录'}">最近登录</span></div>
        </div>
        <div class="user-actions ms-3">
            <button class="btn btn-outline-primary btn-sm px-3" data-bs-toggle="modal" th:data-bs-target="'#editUserModal-' + ${user.id}">编辑</button>
            <form th:action="@{/users/delete}" method="post" style="display:inline;">
                <input type="hidden" name="id" th:value="${user.id}" />
                <button type="submit" class="btn btn-outline-danger btn-sm px-3" onclick="return confirm('确定要删除该用户吗？');">删除</button>
            </form>
        </div>
    </div>

    <!-- 新增用户模态框 -->
    <div class="modal fade" id="addUserModal" tabindex="-1">
        <div class="modal-dialog">
            <form th:action="@{/users/add}" method="post" class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">新增用户</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3"><label class="form-label">昵称</label><input type="text" class="form-control" name="displayName" required></div>
                    <div class="mb-3"><label class="form-label">账号</label><input type="text" class="form-control" name="username" required></div>
                    <div class="mb-3"><label class="form-label">邮箱</label><input type="email" class="form-control" name="email" required></div>
                    <div class="mb-3"><label class="form-label">角色</label><input type="text" class="form-control" name="role" required></div>
                    <div class="mb-3"><label class="form-label">性别</label><input type="text" class="form-control" name="gender"></div>
                    <div class="mb-3"><label class="form-label">年龄</label><input type="number" class="form-control" name="age"></div>
                    <div class="mb-3"><label class="form-label">身高(cm)</label><input type="number" class="form-control" name="height" step="0.1"></div>
                    <div class="mb-3"><label class="form-label">体重(kg)</label><input type="number" class="form-control" name="weight" step="0.1"></div>
                    <div class="mb-3"><label class="form-label">电话</label><input type="text" class="form-control" name="phone"></div>
                    <div class="mb-3"><label class="form-label">头像URL</label><input type="text" class="form-control" name="avatarUrl"></div>
                    <div class="mb-3"><label class="form-label">密码</label><input type="password" class="form-control" name="password" required></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-success">保存</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 编辑用户模态框 -->
    <div th:each="user : ${users}" class="modal fade" th:id="'editUserModal-' + ${user.id}" tabindex="-1">
        <div class="modal-dialog">
            <form th:action="@{/users/edit}" method="post" class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">编辑用户</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="id" th:value="${user.id}" />
                    <div class="mb-3"><label class="form-label">昵称</label><input type="text" class="form-control" name="displayName" th:value="${user.displayName}" required></div>
                    <div class="mb-3"><label class="form-label">账号</label><input type="text" class="form-control" name="username" th:value="${user.username}" required></div>
                    <div class="mb-3"><label class="form-label">邮箱</label><input type="email" class="form-control" name="email" th:value="${user.email}" required></div>
                    <div class="mb-3"><label class="form-label">角色</label><input type="text" class="form-control" name="role" th:value="${user.role}" required></div>
                    <div class="mb-3"><label class="form-label">性别</label><input type="text" class="form-control" name="gender" th:value="${user.gender}"></div>
                    <div class="mb-3"><label class="form-label">年龄</label><input type="number" class="form-control" name="age" th:value="${user.age}"></div>
                    <div class="mb-3"><label class="form-label">身高(cm)</label><input type="number" class="form-control" name="height" th:value="${user.height}" step="0.1"></div>
                    <div class="mb-3"><label class="form-label">体重(kg)</label><input type="number" class="form-control" name="weight" th:value="${user.weight}" step="0.1"></div>
                    <div class="mb-3"><label class="form-label">电话</label><input type="text" class="form-control" name="phone" th:value="${user.phone}"></div>
                    <div class="mb-3"><label class="form-label">头像URL</label><input type="text" class="form-control" name="avatarUrl" th:value="${user.avatarUrl}"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">保存修改</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 成功消息提示 -->
    <div th:if="${success}" class="alert alert-success alert-dismissible fade show" role="alert">
        <span th:text="${success}"></span>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>

    <!-- 错误消息提示 -->
    <div th:if="${error}" class="alert alert-danger alert-dismissible fade show" role="alert">
        <span th:text="${error}"></span>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</div>
</body>
</html> 